<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Position - UIkit tests</title>
        <script src="js/test.js"></script>
        <style>

            /* JavaScript */
            #js-boundary {
                height: 300px;
                outline: 1px solid rgba(0,0,0,0.1);
                position: relative;
            }

            #js-target {
                position: absolute;
                left: 0;
                top: 0;
                width: 200px;
                height: 100px;
                background: rgba(0,0,0,0.1);
            }

            #js-element {
                position: absolute;
                width: 75px;
                height: 75px;
                background: rgba(0,0,0,0.1);
            }

        </style>
    </head>

    <body>

        <div class="uk-container">

            <h1>Position</h1>

            <div class="uk-position-relative">

                <div class="uk-child-width-1-2@s" uk-grid>
                    <div>

                        <div class="uk-inline">
                            <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-top-left">Top Left</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-top-center">Top Center</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-top-right">Top Right</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-center-left">Center Left</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-center">Center Center</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-center-right">Center Right</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-bottom-left">Bottom Left</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-bottom-center">Bottom Center</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-bottom-right">Bottom Right</div>
                        </div>

                    </div>
                    <div>

                        <div class="uk-inline">
                            <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-top uk-text-center">Top</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-bottom uk-text-center">Bottom</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-left uk-flex uk-flex-middle">Left</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-right uk-flex uk-flex-middle">Right</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-center">Test if the text uses the available width if centered</div>
                        </div>

                    </div>
                </div>

                <div class="uk-overlay uk-overlay-primary uk-padding-small uk-position-center-left-out uk-visible@xl">Out Test</div>
                <div class="uk-overlay uk-overlay-primary uk-padding-small uk-position-center-right-out uk-visible@xl">Out Test</div>

            </div>

            <h2>Small</h2>

            <div class="uk-position-relative">

                <div class="uk-child-width-1-2@s" uk-grid>
                    <div>

                        <div class="uk-inline">
                            <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-top-left">Top Left</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-top-center">Top Center</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-top-right">Top Right</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-center-left">Center Left</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-center">Center Center</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-center-right">Center Right</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-bottom-left">Bottom Left</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-bottom-center">Bottom Center</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-bottom-right">Bottom Right</div>
                        </div>

                    </div>
                    <div>

                        <div class="uk-inline">
                            <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-top uk-text-center">Top</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-bottom uk-text-center">Bottom</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-left uk-flex uk-flex-middle">Left</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-right uk-flex uk-flex-middle">Right</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-center">
                                <div class="uk-width-xlarge">Test if the overlay does not succeed the container width and position margin is taken into account.</div>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="uk-overlay uk-overlay-primary uk-padding-small uk-position-small uk-position-center-left-out uk-visible@xl">Out</div>
                <div class="uk-overlay uk-overlay-primary uk-padding-small uk-position-small uk-position-center-right-out uk-visible@xl">Out</div>

            </div>

            <h2>Medium</h2>

            <div class="uk-position-relative">

                <div class="uk-child-width-1-2@s" uk-grid>
                    <div>

                        <div class="uk-inline">
                            <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-top-left">Top Left</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-top-center">Top Center</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-top-right">Top Right</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-center-left">Center Left</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-center">Center Center</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-center-right">Center Right</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-bottom-left">Bottom Left</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-bottom-center">Bottom Center</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-bottom-right">Bottom Right</div>
                        </div>

                    </div>
                    <div>

                        <div class="uk-inline">
                            <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-top uk-text-center">Top</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-bottom uk-text-center">Bottom</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-left uk-flex uk-flex-middle">Left</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-right uk-flex uk-flex-middle">Right</div>
                        </div>

                    </div>
                </div>

                <div class="uk-overlay uk-overlay-primary uk-padding-small uk-position-medium uk-position-center-left-out uk-visible@xl">Out</div>
                <div class="uk-overlay uk-overlay-primary uk-padding-small uk-position-medium uk-position-center-right-out uk-visible@xl">Out</div>

            </div>

            <h2>Large</h2>

            <div class="uk-position-relative">

                <div class="uk-child-width-1-2@s" uk-grid>
                    <div>

                        <div class="uk-inline">
                            <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-top-left">Top Left</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-top-center">Top Center</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-top-right">Top Right</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-center-left">Center Left</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-center">Center Center</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-center-right">Center Right</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-bottom-left">Bottom Left</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-bottom-center">Bottom Center</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-bottom-right">Bottom Right</div>
                        </div>

                    </div>
                    <div>

                        <div class="uk-inline">
                            <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-top uk-text-center">Top</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-bottom uk-text-center">Bottom</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-left uk-flex uk-flex-middle">Left</div>
                            <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-right uk-flex uk-flex-middle">Right</div>
                        </div>

                    </div>
                </div>

                <div class="uk-overlay uk-overlay-primary uk-padding-small uk-position-large uk-position-center-left-out uk-visible@xl">Out</div>
                <div class="uk-overlay uk-overlay-primary uk-padding-small uk-position-large uk-position-center-right-out uk-visible@xl">Out</div>

            </div>

            <h2>Cover</h2>

            <div class="uk-child-width-1-4@s" uk-grid>
                <div>

                    <div class="uk-inline">
                        <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-cover uk-flex uk-flex-center uk-flex-middle">Cover</div>
                    </div>

                </div>
                <div>

                    <div class="uk-inline">
                        <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-small uk-position-cover uk-flex uk-flex-center uk-flex-middle">Cover</div>
                    </div>

                </div>
                <div>

                    <div class="uk-inline">
                        <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-medium uk-position-cover uk-flex uk-flex-center uk-flex-middle">Cover</div>
                    </div>

                </div>
                <div>

                    <div class="uk-inline">
                        <a class="uk-display-block" href="#"><img src="images/photo.jpg" width="1800" height="1200" alt=""></a>
                        <div class="uk-overlay uk-overlay-default uk-padding-small uk-position-large uk-position-cover uk-flex uk-flex-center uk-flex-middle">Cover</div>
                    </div>

                </div>
            </div>

            <h2>JavaScript</h2>

            <div id="js-boundary" class="uk-margin">
                <div id="js-target" class="uk-flex uk-flex-center uk-flex-middle" draggable="true">Drag me!</div>
            </div>

            <div id="js-element"></div>

            <div class="uk-grid uk-child-width-auto uk-form-stacked" style="margin-bottom: 100vh">
                <div>

                    <div class="uk-margin">
                        <span class="uk-form-label">Element</span>
                        <label>
                            Horizontal
                            <select id="js-element_x" class="uk-select uk-form-small uk-form-width-xsmall">
                                <option value="left">left</option>
                                <option value="center">center</option>
                                <option value="right">right</option>
                            </select>
                        </label>
                        <label>
                            Vertical
                            <select id="js-element_y" class="uk-select uk-form-small uk-form-width-xsmall">
                                <option value="top">top</option>
                                <option value="center">center</option>
                                <option value="bottom">bottom</option>
                            </select>
                        </label>
                    </div>

                    <div class="uk-margin">
                        <span class="uk-form-label">Target</span>
                        <label>
                            Horizontal
                            <select id="js-target_x" class="uk-select uk-form-small uk-form-width-xsmall">
                                <option value="left">left</option>
                                <option value="center">center</option>
                                <option value="right">right</option>
                            </select>
                        </label>
                        <label>
                            Vertical
                            <select id="js-target_y" class="uk-select uk-form-small uk-form-width-xsmall">
                                <option value="top">top</option>
                                <option value="center">center</option>
                                <option value="bottom">bottom</option>
                            </select>
                        </label>
                    </div>

                </div>
                <div>

                    <div class="uk-margin">
                        <span class="uk-form-label">Offset</span>
                        <label>
                            Horizontal
                            <input id="js-offset_x" class="uk-input uk-form-small uk-form-width-xsmall" type="text">
                        </label>
                        <label>
                            Vertical
                            <input id="js-offset_y" class="uk-input uk-form-small uk-form-width-xsmall" type="text">
                        </label>
                    </div>

                    <div class="uk-margin">
                        <span class="uk-form-label">Placement</span>
                        <label>
                            Horizontal
                            <select id="js-placement_x" class="uk-select uk-form-small uk-form-width-xsmall">
                                <option value="">None</option>
                                <option value="flip" selected>Flip</option>
                                <option value="shift">Shift</option>
                            </select>
                        </label>
                        <label>
                            Vertical
                            <select id="js-placement_y" class="uk-select uk-form-small uk-form-width-xsmall">
                                <option value="">None</option>
                                <option value="flip" selected>Flip</option>
                                <option value="shift">Shift</option>
                            </select>
                        </label>
                    </div>

                </div>
            </div>

        </div>

        <script>

            const {$, $$, css, getEventPos, on, offset, positionAt} = UIkit.util;
            let boundary = $('#js-boundary');
            let element = $('#js-element');
            let target = $('#js-target');
            let offsetX;
            let offsetY;

            function position() {
                positionAt(
                    element,
                    target,
                    {
                        boundary,
                        attach:{
                            element: [$('#js-element_x').value, $('#js-element_y').value],
                            target: [$('#js-target_x').value, $('#js-target_y').value]
                        },
                        offset: [$('#js-offset_x').value, $('#js-offset_y').value],
                        placement: [$('#js-placement_x').value, $('#js-placement_y').value]
                    }
                );
            }

            on(window, 'dragstart', e => {
                e.dataTransfer.setDragImage(new Image(), 0, 0);

                offsetX = Math.round(e.pageX - offset(target).left);
                offsetY = Math.round(e.pageY - offset(target).top);

            });

            let lastPos;
            on(window, 'dragover', e => {

                const pos = getEventPos(e);

                if (lastPos?.x === pos.x && lastPos?.y === pos.y) {
                    return;
                }
                lastPos = pos;

                e.preventDefault();

                // positions target at mouse cursor
                positionAt(
                    target,
                    boundary,
                    {
                        offset: [e.pageX - offset(boundary).left - offsetX, e.pageY - offset(boundary).top - offsetY]
                    }
                );

                // positions element at target
                position();
            });

            on($$('select,input'), 'change', position);
            on(window, 'scroll', position, { passive: true });

            position();

        </script>

    </body>
</html>
